<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <%
        String contextPath = request.getContextPath();
        String basePath = request.getScheme() + "://"
                + request.getServerName() + ":" + request.getServerPort()
                + contextPath + "/";
    %>
    <base href="<%=basePath%>">
    <meta charset="utf-8">
    <title>收藏排行榜</title>
    <link rel="stylesheet" type="text/css" href="css/common.css">
    <link rel="stylesheet" type="text/css" href="css/ranking-list.css">
    <script src="js/jquery-1.11.0.min.js"></script>
</head>
<body>
<!--引入头部-->
<div id="header"></div>

<div class="contant">
    <div class="list clearfix">
        <ul id="collect_rank_ul">
            <li>
                <span class="num one">1</span>
                <a href="route_detail.html"><img src="images/jiangxuan_4.jpg" alt=""></a>
                <h4><a href="route_detail.html">【尾单特卖】全国-曼谷6-7天自由行 泰国出境旅游 特价往6-7天自由行 泰国出境旅游 特价往..</a></h4>
                <p>
                    <b class="price">&yen;<span>899</span>起</b>
                    <span class="shouchang">已收藏450次</span>
                </p>
            </li>
            <li>
                <span class="num two">2</span>
                <a href="route_detail.html"><img src="images/jiangxuan_4.jpg" alt=""></a>
                <h4><a href="route_detail.html">【尾单特卖】全国-曼谷6-7天自由行 泰国出境旅游 特价往6-7天自由行 泰国出境旅游 特价往..</a></h4>
                <p>
                    <b class="price">&yen;<span>899</span>起</b>
                    <span class="shouchang">已收藏450次</span>
                </p>
            </li>
        </ul>
    </div>
</div>

<!--导入底部-->
<div id="footer"></div>
<!--导入布局js，共享header和footer-->
<script type="text/javascript" src="js/include.js"></script>

<script>
    //查询最多收藏景点数据
    $.post("sight/findCollectestSight", {}, function (list) {
        // 判断是否查找成功
        if (typeof (list.flag) == "undefined") {
            var lis = "";

            var count = 1;
            //遍历map集合
            for (var j = 0; j < list.length; j++) {
                var sight = list[j];
                var style = ""; // 样式

                if (count == 1) {
                    style = "num one";
                } else if (count == 2) {
                    style = "num two";
                } else {
                    style = "num";
                }

                var doller = "&yen;";
                var start = "起";
                var price = sight.lowestPrice;
                if (price == "0") {
                    doller = "";
                    start = "";
                    price = "";
                }

                var li = '<li><a href=' + sight.sightId + '"sight_detail.jsp?sightId=">\n' +
                    '                        <span class="' + style + '">' + count + '</span>\n' +
                    '                        <a href=' + sight.sightId + '"sight_detail.jsp?sightId="><img src="' + sight.sightImg + '" alt=""></a>\n' +
                    '                        <h4><a href=' + sight.sightId + '"sight_detail.jsp?sightId=">' + sight.introduce + '</a></h4>\n' +
                    '                        <p>\n' +
                    '                            <b class="price">' + doller + '<span>' + price + '</span>' + start + '</b>\n' +
                    '                            <span class="shouchang">已收藏' + sight.collectCount + '次</span>\n' +
                    '                        </p>'
                '                    </a></li>';

                count++;

                lis += li;
            }
            //将lis字符串，设置到ul的html内容中
            $("#collect_rank_ul").html(lis);

        }
    });
</script>
</body>
</html>